<template>
  <div class="fin_chart" ref="charts"></div>
</template>
<style lang="scss" scoped>
.fin_chart {
  width: 100%;
  height: 100%;
  // position: absolute;
}
</style>
<script>
import { finishedData } from "@/api/midApi.js";
export default {
  name: "FinChartTwo",
  data() {
    return {
      pieData: null,
      partA: null,
      partB: null,
      timer: null,
    };
  },
  created() {
    this.getChartData();
  },
  mounted() {
    this.timer = setInterval(() => {
      setTimeout(this.getChartData(), 0);
    }, 10000);
  },
  watch: {
    pieData(val) {
      // this.mycharts();
    },
  },
  methods: {
    getChartData() {
      finishedData()
        .then((res) => {
          if (res.status == 200) {
      const result = JSON.parse(JSON.stringify(res.data));
      // const result = {
      //   location_empty: 12,
      //   location_name1: "IHE-FG-0115",
      //   location_name10: "null_location",
      //   location_name11: "IHE-FG-0111",
      //   location_name12: "IHE-FG-0502",
      //   location_name13: "IHE-FG-0122",
      //   location_name14: "IHE-FG-0211",
      //   location_name2: "IHE-FG-0322",
      //   location_name3: "null_location",
      //   location_name4: "null_location",
      //   location_name5: "IHE-FG-0308",
      //   location_name6: "null_location",
      //   location_name7: "IHE-FG-0604",
      //   location_name8: "IHE-FG-0605",
      //   location_name9: "IHE-FG-0118",
      //   location_total: 142,
      //   object_sum1: 9,
      //   object_sum10: 0,
      //   object_sum11: 1,
      //   object_sum12: 1,
      //   object_sum13: 17,
      //   object_sum14: 18,
      //   object_sum2: 7,
      //   object_sum3: 0,
      //   object_sum4: 0,
      //   object_sum5: 15,
      //   object_sum6: 0,
      //   object_sum7: 3,
      //   object_sum8: 4,
      //   object_sum9: 3,
      //   part_A: 32,
      //   part_A1: 5,
      //   part_B: 15,
      //   part_no1: "55024315",
      //   part_no10: "55021819",
      //   part_no11: "55021857",
      //   part_no12: "55021860",
      //   part_no13: "55026631",
      //   part_no14: "55026647",
      //   part_no2: "55024326",
      //   part_no3: "55025295",
      //   part_no4: "55025298",
      //   part_no5: "55020315",
      //   part_no6: "55021698",
      //   part_no7: "55026682A",
      //   part_no8: "55021708",
      //   part_no9: "55021809",
      // };
      const total = result.location_total;
      this.partA = result.part_A;
      this.partB = result.part_B;
      const emptyPart =
        ((result.part_A + result.part_B) / total).toFixed(2) * 100;
      const emptyLocation = (result.location_empty / total).toFixed(2) * 100;
      const fullPart = Math.floor(
        (
          Number(
            total - result.part_A - result.part_B - result.location_empty
          ) / total
        ).toFixed(2) * 100
      );
      console.log(
        "图表数据_getChartData",
        (
          (total - result.part_A - result.part_B - result.location_empty) /
          total
        ).toFixed(2)* 100,
        fullPart
      );
      this.pieData = [
        { name: "空料架", value: emptyPart },
        { name: "满料架", value: fullPart },
        { name: "闲置库位", value: emptyLocation },
      ];
      console.log("图表数据:", this.pieData);
      console.log("图表数据_库位数:", total);
      console.log("图表数据_空:", emptyPart);
      console.log("图表数据_满:", fullPart);
      console.log("图表数据_闲:", emptyLocation);
      this.mycharts();

        }
      })
      .catch((error) => {
        throw error;
      });
    },
    mycharts() {
      let myChart = this.$echarts.init(this.$refs.charts);
      let option = {
        title: {
          text: "空满料架比例",
          top: 3,
          left: 3,
          textStyle: {
            fontSize: 24,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c}",
          textStyle: {
            fontFamily: "Microsoft YaHei",
            fontStyle: "normal",
            fontWeight: "lighter",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "占暂存区库位总量",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            label: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 18,
                fontStyle: "normal",
                fontWeight: "lighter",
                fontFamily: "Microsoft YaHei",
              },
              position: "inside",
              formatter: "{b} \n {c}%",
            },
            data: this.pieData,
            color: ["rgba(0,134,139)", "rgba(30,144,255)", "rgba(135,206,235)"], //各个区域颜色
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
